<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="10">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="课程列表">
					<el-select v-model="searchForm.courseId" @change="changeCourse" filterable placeholder="请选择">
						<el-option v-for="item in courses" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="目标项列表">
					<el-select v-model="searchForm.targetId" filterable placeholder="请选择">
						<el-option v-for="item in targets" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="考核日期">
					<el-date-picker v-model="searchForm.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="searchForm.remark" placeholder="考核备注">

					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="onClearn">清空</el-button>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-table :data="degrees" border highlight-current-row :span-method="objectSpanMethod"
					style="width: 100%">
					<el-table-column prop="appraiseDate" label="考核日期"></el-table-column>
					<el-table-column prop="appraiseRemark" label="备注"></el-table-column>
					<el-table-column prop="courseTitle" label="所属课程"></el-table-column>
					<el-table-column prop="targetTitle" label="目标项"></el-table-column>
					<el-table-column prop="targetScore" label="目标项分值"></el-table-column>
					<el-table-column prop="targetWeight" label="目标项权重">
						<template slot-scope="scope">
							{{scope.row.targetWeight}}%
						</template>
					</el-table-column>
					<el-table-column prop="recordScore" label="目标项成绩"></el-table-column>
					<el-table-column prop="title" label="考核项"></el-table-column>
					<el-table-column prop="score" label="考核分值"></el-table-column>
					<el-table-column prop="weight" label="考核权重">
						<template slot-scope="scope">
							{{scope.row.weight}}%
						</template>
					</el-table-column>
					<el-table-column prop="mark" label="考核打分"></el-table-column>
					<el-table-column prop="appraiseScore" label="目标达成度">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.appraiseScore === null">0</el-tag>
							<el-tag v-if="scope.row.appraiseScore !== null">{{scope.row.appraiseScore}}</el-tag>
						</template>
					</el-table-column>
					<!--<el-table-column prop="gongshi" label="公式"></el-table-column>-->
					<!--<el-table-column prop="gongshi" label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="showRecord(scope.row)" type="text" size="small">重新计算</el-button>
						</template>
					</el-table-column>-->
				</el-table>
			</el-col>
			<!--<el-col :span="10">
				<el-table :data="records" border highlight-current-row style="width: 100%">
					<el-table-column prop="target.targetTitle" label="目标项">
					</el-table-column>
					<el-table-column prop="target.targetScore" label="目标项分数">
					</el-table-column>
					<el-table-column prop="target.targetWeight" label="目标项权重">
						<template slot-scope="scope">
							{{scope.row.target.targetWeight}}%
						</template>
					</el-table-column>
					<el-table-column prop="recordScore" label="当前打分">
					</el-table-column>
					<el-table-column label="权重后单项得分">
						<template slot-scope="scope">
							{{scope.row.recordScore * (scope.row.target.targetWeight / 100)}}
						</template>
					</el-table-column>
				</el-table>
			</el-col>-->
		</el-row>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		appraises: [],
		degrees: [],
		selectAppraise: null,
		students: [],
		courses: [],
		targets: [],
		searchForm: {
			courseId: '',
			targetId: '',
			date: '',
			remark: '',
		}
	}
	let vueMethods = {
		getDegrees() {
			let that = this
			postRequst('/user/getDegrees', that.searchForm, true).then(function (resp) {
				that.appraises = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectAppraise = resp.rows[0]
					that.changedata()
				}
			})
		},
		/**getRecords() {
			let that = this
			postRequst('/user/getRecords', {appraiseId: that.selectAppraise.appraiseId}, true).then(function (resp) {
				that.records = resp.rows
			})
		},
		showRecord(row){
			let that = this
			that.selectAppraise = row
			that.getRecords()
		},**/
		getCourses() {
			let that = this
			postRequst('/user/getCourses', {}).then(function (resp) {
				if (resp.rows && resp.rows.length > 0) {
					for (course of resp.rows) {
						that.courses.push({
							label: course.courseTitle,
							value: course.courseId
						})
					}
				}
			})
		},
		getTargets(courseId) {
			let that = this
			postRequst('/user/getTargets', {courseId: courseId}, true).then(function (resp) {
				if (resp.rows && resp.rows.length > 0) {
					that.targets = []
					for (target of resp.rows) {
						that.targets.push({
							label: target.targetTitle,
							value: target.targetId
						})
					}
				}
			})
		},
		changeCourse(nowVal) {
			let that = this
			that.getTargets(nowVal)
		},
		onClearn() {
			let that = this
			that.searchForm.courseId = ''
			that.searchForm.targetId = ''
			that.searchForm.date = ''
			that.searchForm.remark = ''
			that.getDegrees()
		},
		onSearch() {
			let that = this
			that.getDegrees()
		},
		changedata() {
			let that = this
			var defdata = that.appraises
			if (defdata && defdata.length > 0) {
				var datas = []
				defdata.forEach(ele => {
					const items = ele.items
					items.forEach(function (item, index, array) {
						// span得计算方式：如果仅存在一条，那么需要将span设置为1，默认一行一列
						// 如果是第一条那么需要span设置为长度表示需要跨行行数，后续索引设置为0隐藏，共用跨行
						var spanval = (index === 0 ? (items.length === 1 ? 1 : items.length) : 0)
						datas.push({
							'appraiseId': ele.appraiseId,
							'studentName': ele.studentName,
							'courseTitle': ele.courseTitle,
							'appraiseDate': ele.appraiseDate,
							'appraiseScore': ele.appraiseScore,
							'appraiseRemark': ele.appraiseRemark,
							'recordScore': ele.recordScore,
							'targetTitle': ele.targetTitle,
							'targetScore': ele.targetScore,
							'targetWeight': ele.targetWeight,
							'spanval': spanval,
							'title': item.title,
							'score': item.score,
							'weight': item.weight,
							'mark': item.mark,
							'gongshi': ''
						})
					})
				})
				console.table(datas)
				that.degrees = datas
			}
		},
		objectSpanMethod(spanParams) {
			const {row, column} = spanParams
			// 需要跨行的列名数组
			const columnsToSpan = ['studentName', 'courseTitle', 'targetTitle', 'targetScore',
				'targetWeight', 'recordScore', 'appraiseDate', 'appraiseScore', 'appraiseRemark', 'gongshi']
			if (columnsToSpan.includes(column.property)) {
				return {
					rowspan: row.spanval,
					colspan: 1
				}
			}
			// 不需要跨行的则默认1:1
			return {
				rowspan: 1,
				colspan: 1
			}
		}
	}
	function vueCreated() {
		let that = this
		that.getDegrees()
		that.getCourses()
	}

	// 初始化VUE
	try {
		new Vue({
			...mainApp, ...{
				created: vueCreated,
				data: {...mainApp.data, ...vueData},
				methods: {...mainApp.methods, ...vueMethods}
			}
		});
	} catch (e) {
		console.log(e)
	}
</script>

</html>